<template>
  <el-card class="box-card" style="width: 100%">
    
   <div style="text-align: center;" slot="header" class="clearfix">

    
      <el-form :inline="true" :model="macinfo">

         <el-form-item label="搜索" :label-width="formLabelWidth">
          <el-select size="small"  v-model="macinfo.macsWho" placeholder="请选择所属" @change="selMacByWho()">
          <el-option label="全部" value=0>全部</el-option>
          <el-option label="公司" value=1>公司</el-option>
          <el-option label="客户" value=2>客户</el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="" :label-width="formLabelWidth">
          <el-select size="small"  v-model="macinfo.macsState" placeholder="请选择状态" @change="selMacByWho()">
          <el-option label="全部" value=0>全部</el-option>
          <el-option label="正常" value=1>正常</el-option>
          <el-option label="损坏" value=2>损坏</el-option>
          <el-option label="寿命快到期" value="3">寿命快到期</el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-input
            v-model="macinfo.macs"
            :clearable="true"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="macinfo.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始注册日期"
            end-placeholder="结束注册日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="showMacInfo"
            ><i class="el-icon-search"   ></i
          ></el-button>
          <el-button type="success" @click="dialog.addmacshow = true"
            >入库</el-button
          >
        </el-form-item>
      </el-form>
    </div>

<!-- 
-----------------------添加dialog------------------------------------------------------ -->
  <el-dialog title="添加设备:" :visible.sync="dialog.addmacshow" width="34%">
      <el-form :model="form"  label-width="100px" >
        <el-row>
          <el-col :span="12">
        <el-form-item label="设备类型:" :label-width="formLabelWidth">
          <el-select v-model="addMac.typeId" placeholder="请选择设备类型">
            <el-option
              v-for="dept in MacdeptList"
              :key="dept.id"
              :label="dept.name"
              :value="dept.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="设备品牌:" :label-width="formLabelWidth">
          <el-input v-model="addMac.brand" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备型号:" :label-width="formLabelWidth">
          <el-input v-model="addMac.model" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备容量:" :label-width="formLabelWidth">
          <el-input v-model="addMac.capacity" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="设备状态:" :label-width="formLabelWidth">
          <el-select v-model="addMac.state" placeholder="请选择设备状态">
          <el-option
              v-for="dept in macState"
              :key="dept.value"
              :label="dept.label"
              :value="dept.value"
            ></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="注册时间:" :label-width="formLabelWidth">
          <el-date-picker
            v-model="addMac.date"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="设备寿命:" :label-width="formLabelWidth">
          <el-input v-model="addMac.life" autocomplete="off"></el-input>
        </el-form-item>

         <el-form-item label="序列号:" :label-width="formLabelWidth">
          <el-input v-model="addMac.serialnum" autocomplete="off"></el-input>
        </el-form-item>

         <el-form-item label="设备图片:" prop="headImg" hidden>
              <el-input v-model="addMac.macImg1" clearable></el-input>
            </el-form-item>

        <el-form-item label="设备接口类型:" :label-width="formLabelWidth">
             <el-select v-model="addMac.interfaceId" placeholder="请选择接口类型">
            <el-option
              v-for="dept3 in MacInterList"
              :key="dept3.id"
              :label="dept3.name"
              :value="dept3.id"
            ></el-option>
          </el-select>
        </el-form-item>

         <el-form-item label="设备所属:" :label-width="formLabelWidth">
          <el-select v-model="addMac.macWho" placeholder="请选择设备归属">
            <el-option
              v-for="dept2 in macWhoList"
              :key="dept2.value"
              :label="dept2.label"
              :value="dept2.value"
            ></el-option>
          </el-select>
        </el-form-item>

         <el-form-item label="设备出处:" :label-width="formLabelWidth">

          <el-select v-model="addMac.macProvenance" placeholder="请选择设备出处">
            <el-option
              v-for="dept3 in macProvenanceList"
              :key="dept3.value"
              :label="dept3.label"
              :value="dept3.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="设备数量:" :label-width="formLabelWidth">
          <el-input v-model="addMac.inventory" autocomplete="off"></el-input>
        </el-form-item>

       </el-col>
          <el-col :span="12">
            <el-form-item label="设备图片:">
              <el-upload
                class="avatar-uploader"
                action="http://localhost:9000/upload"
                name="file"
                :show-file-list="false"
                :on-success="handleSuccess"
                :before-upload="beforeUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quXiaoAdd">取 消</el-button>
        <el-button type="primary" @click="addMacInfor" >提 交</el-button>
      </div>
    </el-dialog>  




 <el-dialog title="出库设备" :visible.sync="dialog.ChcKushow" width="32%">
      <el-form :model="form"  label-width="100px" >
        <el-row>
        <el-form-item label="基础信息id" prop="maciId" hidden>
          <el-input v-model="chuKUMacXian.macInforId" clearable></el-input>
        </el-form-item>
        <el-form-item label="设备总数量:" :label-width="formLabelWidth">
          <div>{{chuKUMacXian.inventroy}}</div>
        </el-form-item>
        <el-form-item label="设备出库数量:" :label-width="formLabelWidth">
          <el-input v-model="chuKUMacXian.inventroy1" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备出库类型:" :label-width="formLabelWidth">
            <div> {{chuKuWhy}}</div>
        </el-form-item>
         <el-form-item label="申请工单编号:" :label-width="formLabelWidth">
          <div>{{chuKUMacXian.gongDanId}}</div>
        </el-form-item>
        <el-form-item label="申请人ID:" :label-width="formLabelWidth">
          <div >{{chuKUMacXian.empId}}</div>
        </el-form-item>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.ChcKushow = false">取 消</el-button>
        <el-button type="primary" @click="ChuKuMacTiJiao" >出 库</el-button>
      </div>
    </el-dialog> 




    <el-table :data="macInformation" stripe style="width: auto">
        <el-table-column prop="maciId" label="编号" > </el-table-column>
         <el-table-column prop="typeName" label="设备类型" > </el-table-column>
        <el-table-column prop="brand"  label="设备品牌" ></el-table-column>   
         <el-table-column prop="model" label="设备型号"></el-table-column> 
         <el-table-column prop="capacity" label="设备容量" ></el-table-column> 
      <el-table-column prop="state" label="设备状态">
        <template slot-scope="scope">
          <div v-if="scope.row.state == 1">正常</div>
          <div v-if="scope.row.state == 2">损坏</div>
          <div v-if="scope.row.state == 3">寿命快到期</div>
        </template>
      </el-table-column>
         <el-table-column prop="date" label="注册时间" ></el-table-column> 
         <el-table-column prop="life" label="设备寿命"></el-table-column> 
         <el-table-column prop="interfaceName" label="设备接口类型" ></el-table-column> 
         <el-table-column prop="who" label="设备所属" >
           <template slot-scope="scope">
          <div v-if="scope.row.who == 1">公司</div>
          <div v-if="scope.row.who == 2">客户</div>
           </template> 
        </el-table-column> 
         <el-table-column prop="provenance" label="设备出处" > 
          <template slot-scope="scope">
          <div v-if="scope.row.provenance == 1">采购</div>
          <div v-if="scope.row.provenance == 2">自备</div>
         </template>
          </el-table-column> 
        <el-table-column label="设备图片" width="130">
                <template slot-scope="scope">                   
                    <img :src="scope.row.macsrc" class="picture" />                   
                </template>
        </el-table-column> 
      <el-table-column prop="inventroy" label="设备数量" ></el-table-column> 
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="macChuKuaa(scope.row.maciId)"
            >出库</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="macinfo.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="macinfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        style="text-align: center;"
      >
      </el-pagination>
  </el-card>
</template>



<script>
export default {
  data() {
    return {
      imageUrl: "",
       upload: {
         headerObj: {
           //Spring security时需要传递token，否则不需要该配置
           Authorization: sessionStorage.getItem("authorization"),
        },
       },
      macProvenanceList:[
          {value: 1,
          label: '采购'},
          {value:2,label:'自备'}
          ],
      macWhoList: [
          {value: 1,
          label: '公司'},
          {value: 2,
          label:'客户'}
          ],
      macState:[
          {value: 1,
          label: '正常'},
          {value:2,label:'损坏'},
          {value:3,label:'寿命到期'}],
      macInformation:[],
      page: {
        pageSizes: [5, 10, 20, 50, 100], //下拉列表中的数组
        total:0, //一共有多少条数据
      },
      macinfo: {
        currentPage: 1, //代表当前页
        pageSize: 5, //代表每页显示多少条数据
        macs: "",
        macsWho:"",
        macsState:"",
        dateRange: [],      
      },
      
      addMac:{},
      chuKUMacXian:{},
      MacdeptList:[],
      MacInterList:[],
      dialog: {
      addmacshow: false,
      ChcKushow: false,
      },
      chuKuWhy:"",
    };
  },
  methods: {
     ChuKuMacTiJiao(){
      if(Number(this.chuKUMacXian.inventroy) < Number(this.chuKUMacXian.inventroy1)){
        alert("c出库数量不能大于总数")
      }else{
      this.$axios.post("/macInformation/chuKuMac",this.chuKUMacXian).then((res)=>{
        if(res.data.code=200){
          alert("出库成功")
        
        }else{
          alert("出库失败，系统异常")
         
        }
      })
       this. dialog.ChcKushow=false;
      this.showMacInfo();
      }
     },
    macChuKuaa(id){
      this.chuKUMacXian.empId = sessionStorage.getItem("empId"); 
      this.chuKUMacXian.gongDanId = sessionStorage.getItem("num");
     if(this.chuKUMacXian.empId==null && this.chuKUMacXian.gongDanId==null  ){
      this.xxx="损坏";
       this.chuKUMacXian.macWhy = 5;
     }else{
      this.chuKUMacXian.macWhy = 4;
      this.xxx="工程调用";
     }
      this.dialog.ChcKushow = true;
      this.$axios.get("/macInformation/"+id).then((res)=>{
      this.chuKUMacXian = res.data.data.chuKUMacXian;
      })
    },
    quXiaoAdd(){
    this.dialog.addmacshow = false; //关掉模态框
    this.addMac = {};
    },
    handleSizeChange(val) {
      //当每页数据改变时
      this.macinfo.pageSize = val;
      this.showMacInfo();
    },
    macWhoList(){
      alert(this.macinfo.macWho1);
      //this.showMacInfo();
    },
    handleCurrentChange(val) {
      //当点击页码时
      this.macinfo.currentPage = val;
      this.showMacInfo();
    },
    
    addMacInfor() {
      this.$axios.post("/macInformation", this.addMac).then((res) => {
        if(res.data.code == 200) {
          this.dialog.addmacshow = false; //关掉模态框
          this.addMac = {};
          this.showMacInfo(); //重新加载数据
        }
      });
    },
    selMacByWho(){
        this.showMacInfo()
    },
    showMacInfo(){
        this.$axios.post("/macInformation/selAllMac",this.macinfo).then((res) => {
        this.macInformation = res.data.data.macList;  
        this.page.total = res.data.data.total;    
      });
    },
    loadMacDepts() {
      this.$axios.get("/macDept").then((res) => {
        this.MacInterList=res.data.data.MacInterList;
        this.MacdeptList = res.data.data.MacdeptList;
      });
    },
    handleSuccess(res , file) {
      if (res.code == 200) {
        this.imageUrl = res.message;
        this.addMac.macImg1 = res.message; //将返回的文件储存路径赋值picture字段
      }
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 png 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  mounted(){
    this.showMacInfo();
    this.loadMacDepts();
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>